<template>
    <div class="body">
        <van-sticky>
            <van-search
            v-model="search"
            shape="round"
            :background="color"
            input-align="center"
            placeholder="搜索商品"
            @search="onToSearch"
            />
        </van-sticky>
        <van-dropdown-menu :active-color="color">
            <van-dropdown-item v-model="value1" :options="option1" @change="onChangeValue1"/>
            <van-dropdown-item id="item" title="筛选">
                    <van-cell :title="switchTitle1">
                        <van-switch
                            slot="right-icon"
                            size="20px"
                            style="height: 20px"
                            :active-color="color" 
                            v-model="switch1"
                            @input="onSwitch1Change"
                        />
                        </van-cell>
                        <van-cell :title="switchTitle2">
                        <van-switch
                            slot="right-icon"
                            size="20px"
                            style="height: 20px"
                            :active-color="color" 
                            v-model="switch2"
                            @input="onSwitch2Change"
                        />
                        </van-cell>
            </van-dropdown-item>
            <!-- <van-dropdown-item v-model="value3" :options="option3" /> -->
        </van-dropdown-menu>
        <van-card
        v-for="(item,index) of data" :key="index"
        :num="`已售${item.sales}件`"
        :price="item.price"
        :origin-price="item.ot_price"
        :desc="item.info"
        :title="item.name"
        :thumb="$store.getters.base_url+item.image"
        />
    </div>
</template>
<script>
import {search} from '../ajax'
import {Toast} from 'vant'
export default{
    data() {
        return {
            color:"#3DCEB9",
            switchTitle1: '新品',
            switchTitle2: '热销',
            switch1:false,
            switch2:false,
            option1: [
            { text: '默认排序', value: 0 },
            { text: '销量从低到高', value: 1 },
            { text: '销量从高到低', value: 2 },
            { text: '价格从低到高', value: 3 },
            { text: '价格从高到低', value: 4 }
            ],
            value1: 0,
            data:[],
            search:'',
            priceOrder:'',
            is_hot:'',
            salesOrder:'',
            is_new:'',
            cate_id:''
        }
    },
    created(){
        if(this.$route.query.search){
            this.search = this.$route.query.search
        }
        this.onSearch({text:this.search});
    },
    methods:{
        onChangeValue1(value){
            switch(value){
                case 1:
                    this.onSearch({text:this.search,salesOrder:"asc",is_new:this.switch1?1:'',is_hot:this.switch2?1:''});
                    break;
                case 2:
                    this.onSearch({text:this.search,salesOrder:"desc",is_new:this.switch1?1:'',is_hot:this.switch2?1:''});
                    break;
                case 3:
                    this.onSearch({text:this.search,priceOrder:"asc",is_new:this.switch1?1:'',is_hot:this.switch2?1:''});
                    break;
                case 4:
                    this.onSearch({text:this.search,priceOrder:"desc",is_new:this.switch1?1:'',is_hot:this.switch2?1:''});
                    break;
                default:
                    this.onSearch({text:this.search,is_new:this.switch1?1:'',is_hot:this.switch2?1:''})
            }
        },
        onSwitch1Change(detail) {
            console.log(detail);
            this.switch1 = detail;
            if(detail){
                this.switch2 = false;
            }
            let data = {text:this.search,is_new:detail?1:'',is_hot:this.switch2?1:''}
            switch(this.value1){
                case 1:
                    data.salesOrder = "asc";
                    break;
                case 2:
                    data.salesOrder = "desc";
                    break;
                case 3:
                    data.priceOrder = "asc";
                    break;
                case 4:
                    data.priceOrder = "desc";
                    break;
            }
            this.onSearch(data)
            // console.log(this.switch1);
        },
        onSwitch2Change(detail) {
            console.log(detail);
            this.switch2 = detail;
            if(detail){
                this.switch1 = false;
            }
            let data = {text:this.search,is_hot:detail?1:'',is_new:this.switch1?1:''}
            switch(this.value1){

            }
            this.onSearch(data)
        },
        onToSearch(e){
            this.onSearch({text:e});
        },
        onSearch(e){
            if(!e.text){
                Toast('请输入搜索内容');
                return;
            }
            // const {priceOrder,is_hot,salesOrder,is_new,cate_id} = this
            e.admin_id = this.$store.getters.admin_id;
            // const data = {
            //     admin_id:this.$store.getters.admin_id,
            //     text:e,
            //     priceOrder,
            //     is_hot,
            //     salesOrder,
            //     is_new,
            //     cate_id
            // }
            search(e).then(res=>{
                // console.log(res);
                this.data = res;
            })
        }
    }
}
</script>
<style lang="scss" scoped>
$green:#3DCEB9;
.body{
    >>> .van-cell__title{
        font-size: 1rem;
        font-weight: 500;
    }
}
</style>